<template>
  <div ref="container" class="app-container">
    <muuri-grid ref="grid" :options="muuriOptions" :style="{'width':(itemWidth*3)+'px'}" id="example-grid"
                @gridCreated="gridInstence">
      <div class="item" :style="{'width':(item.size==3?2*itemWidth:itemWidth)+'px'}" v-for="item in list" :key="item.id"
           :eId="item.id"
           :eTop="item.top"
           v-contextmenu:contextmenu>
        <div class="item-content">
          <img v-if="item.top==1" :src="topIcon" style="position: absolute;top: 0;right: 0;width: 50px">
          <el-tooltip :content="item.name" effect="light" placement="top">
            <img :src="convert(item.imagePath)" @load="imageLoaded" alt="">
          </el-tooltip>
        </div>
      </div>
    </muuri-grid>

    <v-contextmenu ref="contextmenu" @contextmenu="handleContextmenu">
      <v-contextmenu-item @click="onRichTextEdit">编辑</v-contextmenu-item>
      <v-contextmenu-item @click="onTop">更改置顶状态</v-contextmenu-item>
      <v-contextmenu-item @click="removeItem">删除</v-contextmenu-item>

    </v-contextmenu>

    <!--添加按钮-->
    <el-button type="primary" class="add" icon="el-icon-plus" @click="showAdd" circle></el-button>
    <el-button type="warning" class="upload" icon="el-icon-upload2" @click="flushAll" circle></el-button>


    <example-edit v-if="dialogVisible" :show.sync="dialogVisible" @close="dialogVisible=false,getData()"
                  :id="editId"></example-edit>

  </div>
</template>

<script>
  import Example from '../../api/example'
  import convert from '../../utils/convert'
  import exampleEdit from './components/exampleEdit'
  import topIcon from '@/assets/case/top.png'

  export default {
    name: "case",
    components: {exampleEdit},
    data() {
      return {
        topIcon: topIcon,
        list: [],
        currentMenuKey: 1,
        dialogVisible: false,
        grid: null,
        pickImageShow: false,
        editId: null,
        itemWidth: 300,
        top: {
          total: 0,
          number: [0, 0, 0]
        },
        muuriOptions: {
          dragEnabled: true,
          layout: {
            fillGaps: true,
            alignLeft: true,
            alignTop: true,
          }
        },
        imageLoadCount: 0
      }
    },
    methods: {
      imageLoaded() {
        if (this.imageLoadCount < 0) {
          return
        }
        this.imageLoadCount++
        if (this.imageLoadCount >= this.list.length) {
          this.grid.refreshItems();
          this.grid.layout();
          this.imageLoadCount = -1
        }
      },
      onTop() {
        // 1:1 2:4 3:1
        var _this = this
        var item
        var itemIndex
        this.list.forEach(function (i, index) {
          if (i.id == _this.currentMenuKey) {
            item = i
            itemIndex = index
          }
        })
        if (item.top == 1) {
          //取顶操作
          this.list[itemIndex].top = 0
          this.top.total--
          this.top.number[item.size - 1]--

        } else {
          //置顶操作
          var iCount = this.top.number[item.size - 1]
          //是否置顶

          //判断可否置顶
          var ok = false
          switch (item.size) {
            case 1:
              if (iCount < 1) ok = true
              break
            case 2:
              if (iCount < 4) ok = true
              break
            case 3:
              if (iCount < 1) ok = true
              break
          }
          if (!ok) {
            this.$message({type: 'success', message: '此尺寸已够'})
            return
          }
          //判断可否置顶

          this.list[itemIndex].top = 1
          this.top.total++
          this.top.number[item.size - 1]++
        }

      },
      handleContextmenu(vnode) {
        this.currentMenuKey = vnode.key
      },
      flushAll() {
        var sortList = []
        if (this.top.total < 6) {
          this.$message("需要6个置顶案例")
          return
        }

        this.grid.getItems().forEach(function (i, index) {
          sortList.push({
            order: index,
            id: parseInt(i._element.attributes.eId.value),
            top: parseInt(i._element.attributes.eTop.value),
          })
        })
        Example.refreshExampleSort(sortList).then(res => {
          if (res.data.succ == true) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          }
        })
      },
      showAdd() {
        // this.pickImageShow = true
        this.editId = null
        this.dialogVisible = true
      },
      onRichTextEdit() {
        this.dialogVisible = true
        this.editId = this.currentMenuKey
      },
      removeItem() {
        var _this = this
        Example.removeExampleById(this.currentMenuKey).then(res => {
          if (res.data.succ == true) {
            _this.getData()
            _this.$message({
              message: '操作成功',
              type: 'success'
            });
          }
        })
      },
      getData() {
        Example.findExampleListWithImage().then(res => {
          this.list = res.data.list
          var _this = this

          //标记top
          this.list.map(function (i) {
            if (i.top == 1) {
              _this.top.total++
              _this.top.number[i.size - 1] = _this.top.number[i.size - 1] + 1
            }
          })
          this.$nextTick(() => {
            this.grid.remove(this.grid.getItems())
            for (var i of document.querySelectorAll('.item')) {
              //分开一次一次加才行 原因未知 TODO
              this.grid.add(i)
            }

          })
        })
      },
      convert(p) {
        return convert.pathToUrl(p)
      },
      gridInstence(grid) {
        this.grid = grid
      }
    },
    mounted() {
      var containerWidth = this.$refs.container.offsetWidth - 40
      this.itemWidth = containerWidth / 3
      this.getData()
    }
  }
</script>

<style lang="scss" scoped>
  #sortable .file_p img {
    width: 240px;
  }

  .app-container {
    position: relative;
    box-sizing: content-box;

  }

  #example-grid {
    position: relative;
    width: 900px;
  }

  .item {
    width: 300px;
    height: auto;
    min-height: 100px;
    overflow: hidden;
    margin: 0;

    img {
      width: 100%;
      display: block;
    }
  }


  .item.muuri-item-dragging {
    z-index: 3;
  }

  .item.muuri-item-releasing {
    z-index: 2;
  }

  .item.muuri-item-hidden {
    z-index: 0;
  }

  .upload {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }

  .add {
    position: fixed;
    bottom: 70px;
    right: 20px;
  }
</style>
